<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<style type="text/css">
		html, body {
			width: 100%;
			height: 100%;
			padding: 0;
		}

		body {
			background-color: #323846;
			color: #8c96a8;
		}

		.loginBox {
			width: 400px;
			height: 300px;
			/*border: 1px solid #fff;*/
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -200px;
			margin-top: -150px;
		}

		.loginBox h3 {
			text-align: center;
			margin: 20px 0;
		}

		.inputGroup {
			height: 38px;
			width: 100%;
			line-height: 38px;
			margin-bottom: 10px;
			overflow: hidden;
			box-sizing: border-box;
		}
		.inputGroup label, .inputGroup input {
			float: left;
		}
		.inputGroup label {
			width: 25%;
			display: inline-block;
			text-align: right;
		}
		.inputGroup input {
			width: 70%;
			height: 100%;
			background-color: transparent;
			border: 1px solid #8c96a8;
			border-radius: 4px;
			box-sizing: border-box;
			color: #8c96a8;
			padding-left: 15px;
		}

		.loginBox button {
			display: inline-block;
			width: 70%;
			margin-left: 25%;
			height: 50px;
			line-height: 50px;
			border: none;
			border-radius: 4px;
			background-color: #19b6d6;
			color: #fff;
			margin-top: 30px;
		}

	</style>
</head>
<body>
	<div class="loginBox">
		<h3>登录</h3>
		<form>
			<div class="inputGroup">
				<label for="username">用户名：</label>
				<input type="text" name="username" id="username">
			</div>
			<div class="inputGroup">
				<label for="password">密码：</label>
				<input type="password" name="password" id="password">
			</div>

			<button type="button" onclick="login()">登录</button>
		</form>
	</div>

	<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
	<script type="text/javascript">
		function login(){
			var username = $('#username').val();
			var password = $('#password').val();
			if(!username) {
				alert('用户名不能为空');
			} else if(!password){
				alert('密码不能为空');
			} else {
				$.ajax({
					type: 'POST',
					url: '/users/login',
					data: {username, password},
					xhrFields: {
						withCredentials: true
					},
					success: function(response){
						if(response.status === '0'){
							location.href = '/chat.html';
						} else {
							alert('登录失败');						}
					}
				})
			}
		}
	</script>
</body>
</html>